<template>
	<view class="container">
		<view class="avatar">
			<image src="/static/images/user-circle.png"></image>
		</view>

		<view class="form">
			<u--form labelPosition="left" :model="business" :rules="rules" ref="uForm">

				<u-form-item label="手机" prop="mobile" borderBottom>
					<u--input type="text" v-model="business.mobile" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>

				<u-form-item label="密码" prop="password" borderBottom>
					<u--input type="password" v-model="business.password" border="none" placeholder="请输入密码"></u--input>
				</u-form-item>

				<view style="margin-top: 25px;">
					<u-button type="warning" @click="onSubmit">绑定注册</u-button>
				</view>

				<!-- <view class="btn" @click="ToRegister">
					立即注册
					<u-icon name="arrow-rightward"></u-icon>
				</view> -->
			</u--form>
		</view>

		<view class="agreement">
			<u-checkbox-group v-model="agreementStatus">
				<u-checkbox name="agreement" label="我已阅读并同意" shape="circle" />
				<navigator class="url" url="/pages/business/agreement">用户服务协议、隐私政策</navigator>
			</u-checkbox-group>
		</view>

		<!-- 信息提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				business: {
					mobile: '13060808091',
					password: 'root'
				},
				rules: {
					mobile: [{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							if (value) {
								return uni.$u.test.mobile(value);
							} else {
								return false;
							}
						},
						type: 'string',
						required: true,
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					'password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
				agreementStatus: false,
				openid: ''
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			this.openid = options.openid ? options.openid : '';
		},
		methods: {
			onSubmit() {
				this.$refs.uForm.validate().then(async () => {

					if (!this.agreementStatus) {
						this.$refs.uToast.show({
							type: 'error',
							message: '请阅读并同意许可协议'
						})
						return false;
					}

					let result = await this.$u.api.business.bind({
						mobile: this.business.mobile,
						password: this.business.password,
						openid: this.openid
					})

					if (result.code == 1) {
						// 存储用户信息
						uni.setStorageSync('business', result.data);
						this.$refs.uToast.show({
							type: 'success',
							message: result.msg,
							complete: () => {
								uni.navigateTo({
									url: '/pages/business/index'
								})
							}
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: result.msg
						})
					}
				}).catch(errors => {})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f8fafe;
	}

	.container .avatar {
		text-align: center;
		background-color: #fff;
		padding-bottom: 20px;
	}

	.avatar image {
		width: 80px;
		height: 80px;
		margin: 50px 0 20px;
	}

	.form {
		margin: 0 50rpx;
		box-sizing: border-box;
	}

	.btn {
		margin-top: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* #ifdef H5 || APP-PLUS */
	.u-icon {
		margin-left: 10px;
	}

	/* #endif */

	.agreement {
		display: flex;
		justify-content: center;
		margin-top: 30px;
		font-size: 14px;
	}

	navigator {
		color: #33ccff;
	}
</style>